<template>
    <div class="skuMain">
        <div>
            <el-button style="margin-left: 20px" @click="addSku" size="small"  icon="el-icon-plus">添加</el-button>
            <el-button style="margin-left: 20px" @click="deleteSku" size="small" type="danger"  icon="el-icon-delete">删除</el-button>
        </div>
        <div class="skuGridArea">
            <el-table
                      @expand-change="exChange"
                     :data="skuData"
                      ref="skuTableRef"
                     style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                 <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-upload
                                action="/mshop/api/gataway/upload/images"
                                list-type="picture-card"
                                :data="props.row"
                                :file-list="props.row.fileList"
                                :on-success="onSuccess"
                                :auto-upload="autoUpload">
                                <i slot="default" class="el-icon-plus"></i>
                                <div slot="file" slot-scope="{file}">
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                                <span class="el-upload-list__item-actions">
                                            <span class="el-upload-list__item-delete" @click="handleRemove(file,props.row)">
                                              <i class="el-icon-delete"></i>
                                            </span>
                                </span>
                            </div>
                        </el-upload>
                    </template>
                </el-table-column>
                <el-table-column
                        label="Sku名称"
                        prop="name">
                    <template slot-scope="scope">
                        <el-form :model="scope.row" :key="scope.row.index" ref="nameForm">
                            <el-form-item label-width="20px" prop="name" label="">
                                <el-input v-model="scope.row.name"></el-input>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="价格">
                    <template slot-scope="scope">
                        <el-form :model="scope.row" :key="scope.row.index" ref="priceForm">
                            <el-form-item label-width="20px" prop="price" label="">
                                <el-input v-model.number="scope.row.price"></el-input>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="stock"
                        label="库存">
                    <template slot-scope="scope">
                        <el-form :model="scope.row" :key="scope.row.index" ref="stockForm">
                            <el-form-item label-width="20px"  prop="stock" label="">
                                <el-input v-model.number="scope.row.stock"></el-input>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script lang="ts">
    import {Component, Vue,Prop} from 'vue-property-decorator'
    import {namespace} from 'vuex-class'
    const goodStore=namespace("goods");
    @Component({
        components:{
        }
    })
    export default class SkuInfo extends Vue {
        [x: string]: any;
        @goodStore.State spuName;
        @Prop() params;
        public autoUpload:any=true;
        private currentIndex=0;
        public skuData=new Array<any>();
        async created(){
            if(this.params){
                this.skuData=this.params.spuDataItem.skus;
            }
        }
        public onSuccess(file){
            let curSku=this.skuData.find(item=>item.id==this.currentIndex);
            if(!curSku.fileList){
                let fileList=new Array();
                fileList.push({url:file.url});
                curSku.fileList=fileList;
                curSku.images=file.url;
            }else{
                curSku.fileList.push({url:file.url});
                curSku.images=curSku.images+";"+file.url;
            }
        }
        //添加sku
        public addSku(){
            this.skuData.push({
                price:'',
                stock:'',
                name:this.spuName
            });
            this.setIndex();
            this.skuData.forEach((item,index)=>{
                item.deleteIndex=index+1;
            });
        }
        private setIndex(){
            this.skuData.forEach((item,index)=>{
                if(!item.id){
                    item.id=index+1;
                }
            })
        }
        //删除Sku
        public deleteSku(){
            this.skuData.forEach((item,index)=>{
                item.deleteIndex=index+1;
            });
            let curSkuData=new Array();
            let selectData=this.getTableData();
            this.skuData.forEach((item)=>{
                let data=selectData.find(curItem=>curItem.deleteIndex==item.deleteIndex);
                if(!data){
                    curSkuData.push(item);
                }
            });
            this.skuData=curSkuData;
        }
        public exChange(row){
            this.currentIndex=row.id;
        }
        public getTableData(){
            let skuTableData:any=this.$refs.skuTableRef;
            let selectData:Array<any>=skuTableData.selection;
            return selectData;
        }
        //删除图片
        public handleRemove(file:unknown,item:unknown){
            console.log(file,item);
        }
    }
</script>
<style lang="less">
    .skuMain{
        background-color: white;
        height: 100%;
        display: flex;
        flex-direction: column;
        .skuGridArea{
            width: 100%;
            min-height: 360px;
            max-height: 360px;
            .el-table__body-wrapper {
                overflow-y: auto;
                position: relative;
                height: 300px;
            }
            .el-table--fit{
                overflow-y: auto;
                height:100%;
            }
        }
    }
</style>